<template>
  <div class="orderlist" :style="{'min-height':winHeight + 'px'}">
    <div class="orderlist_top">
      <span @click="quanbuHandle" :class="{orderlist_act: quanbuStatus == 0}">全部</span>
      <span @click="daizhifuHandle" :class="{orderlist_act: quanbuStatus == 1}">待付款</span>
      <span @click="daifahuoHandle" :class="{orderlist_act: quanbuStatus == 2}">待发货</span>
      <span @click="daishouhuoHandle" :class="{orderlist_act: quanbuStatus == 3}">待收货</span>
      <span @click="okHandle" :class="{orderlist_act: quanbuStatus == 4}">已完成</span>
    </div>

    <ul class="orderlist_ul" v-for="item in quanbu">
      <li class="orderlist_li">
        <div class="li_text">
          <span>{{item.order_id}}</span>
          <p>{{item.order_status | type}}</p>
        </div>
        <ul>
          <li v-for="items in item.goods">
            <img :src="items.pic" alt="">
            <div class="li_div">
              <span>{{items.title}}</span>
              <p>数量: {{items.shop_num}}</p>
              <p>￥{{items.order_price}}</p>
            </div>
          </li>
        </ul>
        <div class="orderlist_heji">
          合计：{{item.price}}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import $ from 'jquery'
import img01 from '../common/images/product02.jpg'
import axios from 'axios'
export default {
  data () {
    return {
      winHeight: '',
      img01,
      quanbu: '',
      quanbuStatus: 0
    }
  },
  methods: {
    getallData (status) {
      var urls = 'listOrder' + '/mid/' + 398 + '/status/' + status + '/pagesize/' + 1000 + '/page/' + 1
      axios.post('/api/' + urls).then(e => {
        this.quanbu = e.data
      })
    },
    quanbuHandle () {
      this.getallData('-1,1,2,3,4')
      this.quanbuStatus = 0
    },
    daizhifuHandle () {
      this.getallData('1')
      this.quanbuStatus = 1
    },
    daifahuoHandle () {
      this.getallData('2')
      this.quanbuStatus = 2
    },
    daishouhuoHandle () {
      this.getallData('3')
      this.quanbuStatus = 3
    },
    okHandle () {
      this.getallData('4')
      this.quanbuStatus = 4
    }
  },
  filters: {
    type (idx) {
      switch (idx) {
        case '-1':
          return '已取消'
        case '1':
          return '待支付'
        case '2':
          return '待发货'
        case '3':
          return '待收货'
        case '4':
          return '已完成'
      }
    }
  },
  created () {
    this.winHeight = $(window).height()
    this.quanbuHandle()
  }
}
</script>

<style>
.orderlist{

}
.orderlist_top{
  width: 6.9rem;
  height: 0.8rem;
  padding: 0 0.3rem;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.orderlist_top span{
  height: 100%;
  display: block;
  line-height: 0.8rem;
  font-size: 0.24rem;
}
.orderlist_ul{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.2rem;
}
.orderlist_li{
  width: 6.9rem;
  /* height: 2.6rem; */
  padding: 0 0.3rem;
  background-color: #ffffff;
  margin-bottom: 0.2rem;
}
.li_text{
  height: 0.6rem;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.li_text span{
  font-size: 0.24rem;
  color: #222222;
}
.li_text p{
  font-size: 0.24rem;
  color: #222222;
}
.orderlist_li ul{
  width: 100%;
  margin-top: 0.2rem;
}
.orderlist_li ul li{
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.orderlist_li ul li img{
  width: 1rem;
}
.li_div{
  width: 5.7rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 0.2rem;
}
.li_div span{
  width: 5.7rem;
  font-size: 0.24rem;
  color: #222222;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.li_div p{
  font-size: 0.24rem;
  color: #999999;
}
.orderlist_heji{
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: start;
  font-size: 0.24rem;
  border-top: 1px solid #eeeeee;
  margin-top: 0.2rem;
}
.orderlist_act{
  border-bottom: 0.04rem solid #f56d02;
  box-sizing: border-box;
}
</style>
